<template>
  <div class="print-footer-tool">
    <div
      v-if="contextmenuFlag"
      class="print-footer-tool__contentmenu"
      :style="{ left: contentmenuX + 'px', top: contentmenuY + 'px' }"
    >
      <div
        class="item print-footer-tool__contentmenu__btn"
        @click="handleDeletePage"
        style="color: #f56c6c;"
      >
        {{ $t("Delete") }}
      </div>
    </div>

    <div class="tool-item" style="color: #999;" @click="handleAddPage">
      <div class="tool-item-btn">
        <i class="el-icon-plus"></i>
      </div>
    </div>
    <div class="tool-pages-bar">
      <div
        v-for="(item, index) in pages"
        :key="index"
        :class="['tool-item', { active: myPageActive == index }]"
        style="min-width: 64px;"
        @click="handleChangePage(index)"
        @contextmenu.prevent="handleContextmenu($event, index)"
      >
        <div class="tool-item-btn" style="min-width: 64px;">
          {{ $t('第') }}{{ index + 1 }}{{ $t('页') }}
        </div>
      </div>
    </div>
    <div class="tool-item" style="width:40px;">
      <el-popover placement="top" width="164" trigger="click">
        <el-form
          label-width="72px"
          label-position="left"
          size="mini"
          class="print-tool-grid-form"
        >
          <el-form-item style="margin-bottom: 16px;" :label="$t('网格大小')">
            <el-input-number
              v-model="myGridSize"
              controls-position="right"
              :min="1"
            />
          </el-form-item>
          <el-form-item
            style="margin-bottom: 0;"
            :label="$t('是否可见')"
            class="marginTop16"
          >
            <el-switch v-model="myGridShow" />
          </el-form-item>
        </el-form>

        <template slot="reference">
          <img v-if="!myGridShow" src="../../../assets/grid.svg" />
          <img v-else src="../../../assets/gridColor.svg" />
        </template>
      </el-popover>
    </div>

    <div
      class="tool-item"
      @click="myRuleShow = !myRuleShow"
      style="width: 40px;"
    >
      <div class="tool-item-btn">
        <img v-if="!myRuleShow" src="../../../assets/rod.svg" />
        <img v-else src="../../../assets/rodColor.svg" />
      </div>
    </div>
    <div class="tool-item" style="width:40px;" @click="handleChangeScale(-10)">
      <i class="el-icon-minus" style="color: #999;"></i>
    </div>
    <div style="width:40px;min-width: 40px; text-align: right;">
      <span>{{ scale }}%</span>
    </div>
    <div class="tool-item" style="width:40px;" @click="handleChangeScale(10)">
      <i class="el-icon-plus" style="color: #999;"></i>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    pages: {
      type: Array,
      default: () => [],
    },
    pageActive: Number,
    scale: Number,
    gridShow: Boolean,
    gridSize: Number,
    ruleShow: Boolean,
  },
  data() {
    return {
      // 右键菜单
      contextmenuFlag: false,
      contentmenuX: "",
      contentmenuY: "",
      contextmenuIndex: -1,
    };
  },
  computed: {
    myPages() {
      return this.pages;
    },
    myScale: {
      get() {
        return this.scale;
      },
      set(val) {
        this.$emit("update:scale", val);
      },
    },
    myGridShow: {
      get() {
        return this.gridShow;
      },
      set(val) {
        this.$emit("update:gridShow", val);
      },
    },
    myGridSize: {
      get() {
        return this.gridSize;
      },
      set(val) {
        this.$emit("update:gridSize", val);
      },
    },
    myRuleShow: {
      get() {
        return this.ruleShow;
      },
      set(val) {
        this.$emit("update:ruleShow", val);
      },
    },
    myPageActive: {
      get() {
        return this.pageActive;
      },
      set(val) {
        this.$emit("update:pageActive", val);
      },
    },
  },
  methods: {
    handleAddPage() {
      this.myPages.push({
        components: [],
      });
    },
    handleDeletePage() {
      if (this.myPageActive > this.contextmenuIndex) {
        this.myPageActive--;
      }

      this.myPages.splice(this.contextmenuIndex, 1);
      this.closeContextmenu();
    },
    handleChangePage(index) {
      this.myPageActive = index;
      this.$emit("setActive", null);
    },

    handleChangeScale(num) {
      if (this.myScale == 10 && num < 0) {
        return 10;
      }
      this.myScale += num;
    },

    watchContextmenu(event) {
      if (
        event.target.className.indexOf("print-footer-tool__contentmenu__btn") ==
        -1
      ) {
        this.closeContextmenu();
      }
      window.removeEventListener("mousedown", this.watchContextmenu);
    },
    handleContextmenu(event, index) {
      if (this.pages.length > 1) {
        this.contextmenuIndex = index;
        event.preventDefault();
        event.stopPropagation();
        this.contentmenuX = event.clientX;
        this.contentmenuY = event.clientY - 21;
        this.contextmenuFlag = true;

        window.addEventListener("mousedown", this.watchContextmenu);
      }
    },
    closeContextmenu() {
      this.contextmenuIndex = -1;
      this.contextmenuFlag = false;
    },
  },
};
</script>
<style lang="scss">
.print-footer-tool {
  position: absolute;
  width: 100%;
  height: 40px;
  left: 0;
  bottom: 0;
  background: #f8f8f8;
  box-shadow: 0px 0px 3px 1px rgba(0, 0, 0, 0.16);
  display: flex;
  align-items: center;

  &__contentmenu {
    position: fixed;
    width: 80px;
    background-color: #fff;
    z-index: 1024;
    box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.15);
    overflow: hidden;
    padding: 4px;
    .item {
      cursor: pointer;
      font-size: 14px;
      padding: 0 8px;
      color: #333;
      &:hover {
        color: #3399ff;
      }
    }
  }

  .tool-item {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 100%;
    min-width: 40px;
    cursor: pointer;

    &-btn {
      width: 100%;
      height: 21px;
      text-align: center;
      border-right: 1px solid #ddd;

      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
    &:hover,
    &.active {
      background-color: #fff;
    }

    img {
      vertical-align: middle;
    }
  }

  .tool-pages-bar {
    height: 100%;
    display: flex;
    flex-grow: 2;
    flex-wrap: nowrap;
    overflow: auto hidden;
  }

  .print-tool-grid-form {
    width: 164px;
    height: 89px;
  }
}
.print-tool-grid-form {
  .el-input__inner {
    border: none;
    border-bottom: 1px solid #dddddd;
    border-radius: 0;
  }

  .el-input-number.is-controls-right .el-input-number__decrease,
  .el-input-number.is-controls-right .el-input-number__increase {
    border: 0;
    width: 16px;
    background-color: inherit;
  }
  .el-input-number.is-controls-right .el-input__inner {
    padding-right: 16px;
  }
}
</style>
